<template>
  <div class="login" @keyup.enter="logingo('error')">
    <div class="loginMain">
      <div class="titleBox">
        <h1 v-html="title"></h1>
        <p>—{{titleName}}</p>
      </div>
      <div class="loginBox">
        <div class="box">
          <p class="logoimg">
            <img :src="logo" alt="logo" />
          </p>
          <h1>{{titleLogin}}</h1>
          <p class="title">{{projectName}}</p>
          <form action="#" class="myfrom">
            <p>
              <label for="userName">{{fromText1}}</label>
              <input type="text" autocomplete="off" id="userName" v-model="userName" />
            </p>
            <p>
              <label for="pass" v-html="fromText2"></label>
              <input type="password" autocomplete="new-password" id="pass" v-model="password" />
            </p>
            <p class="btn" @click="logingo('error')">{{loginText}}</p>
            <!-- <p><span @click="retrievePwd">{{forGetPwd}}</span></p> -->
          </form>
          <p class="recommend">温馨提示：本系统不兼容IE9以下版本。<br>推荐使用：Chrome、Firefox、Safari、Opera、IE10+浏览器。</p>
          <p class="Copyright">Copyright © 成都千嘉科技有限公司 .All rights reserved</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import common from '@/mixins/common'
export default {
  name: 'login',
  inject: ['reload'],
  mixins: [common],
  data () {
    return {
      title: '认真服务千万家',
      logo: require('@/assets/logo.png'),
      titleName: '成都千嘉科技',
      titleLogin: '欢 迎 登 陆',
      projectName: '千家码管理平台',
      fromText1: '用户名',
      fromText2: '密&emsp;码',
      loginText: '登录',
      forGetPwd: '忘记密码？',
      userName: 'admin',
      password: '123456'
    }
  },
  methods: {
    ...mapActions(['handleLogin']),
    logingo (type) {
      if (this.userName === '' || this.password === '') {
        this.$Message.config({
          top: 150,
          duration: 3
        })
        this.$Message[type]({
          background: true,
          content: '请输入用户名或密码!'
        })
      } else {
        const { userName, password } = this
        this.$router.push({ path: '/home' }, onComplete => {
          // do nothing
        }, onAbort => {
          // do nothing
        })
        this.handleLogin({
          userName,
          password
        }).then(res => {
          console.log(res)
          // if (res.code === '0') {
          //   localStorage.setItem(USER_INFO_KEY, JSON.stringify(res.data));
          //   this.$router.push({
          //     name: 'home'
          //   });
          // } else {
          //   this.$Message[type]({
          //     background: true,
          //     content: res.msg
          //   });
          // }
        })
      }
    },
    // 修改密码
    retrievePwd () {
      this.$router.push({
        name: 'retrievePwd'
      })
    }
  },
  // 计算属性
  computed: {},
  // 局部组件配置
  components: {}
}
</script>
<style lang="less" scoped>
@import '../../index.less';
.login {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  // background: url('@{login-bg}') center center no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  .loginMain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    background: rgba(33, 34, 66, 0.3);
    .titleBox {
      width: 42%;
      height: 60%;
      min-height: 318px;
      position: fixed;
      margin-left: 11%;
      margin-top: 14%;
      h1 {
        position: fixed;
        top: 30%;
        left: 11%;
        font-size: 3.1vw;
        color: #ffffff;
        letter-spacing: 1.5vw;
        font-weight: 500;
      }
      p {
        font-size: 1.6vw;
        color: #ffffff;
        letter-spacing: 0.6vw;
        position: fixed;
        top: 42%;
        left: 35%;
      }
    }
    .loginBox {
      position: fixed;
      top: 0;
      left: 62%;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      padding-left: 7.5vw;
      .box {
        position: absolute;
        top: 1%;
        right: 64%;
        width: 30%;
        height: 88%;
        min-height: 60vh;
        padding-top: 10%;
        p.logoimg {
          position: fixed;
          top: 8%;
          right: 5%;
          height: 3.5vw;
          line-height: 3.5vw;
          img {
            width: 3.5vw;
          }
        }
        h1 {
          font-weight: 500;
          font-size: 2.58vw;
          color: #ffffff;
        }
        p.title {
          font-size: 1.86vw;
          color: #ffffff;
          margin-bottom: 12%;
        }
        .myfrom {
          p {
            height: 100%;
            margin-bottom: 3vh;
            line-height: 2vw;
            label {
              font-size: 0.93vw;
              display: block;
              color: #999999;
              margin: 0;
            }
            input {
              width: 24.18vw;
              background: none;
              border: none;
              outline: none;
              height: 5vh;
              line-height: 5vh;
              color: #ffffff;
              font-size: 1.55vw;
              border-bottom: 0.1vh solid #979797;
              -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
            }
            span {
              font-size: 0.72vw;
              color: #fff;
              display: inline-block;
              margin: 2.377vw 0 0 19.63vw;
              cursor: pointer;
            }
            i {
              display: none;
              margin-left: -1.55vw;
              img {
                width: 1.03vw;
                height: 1.03vw;
              }
            }
          }
          p.btn {
            margin-top: 6vh;
            height: 2.58vw;
            line-height: 2.58vw;
            font-size: 0.82vw;
            color: #ffffff;
            width: 24.18vw;
            background-image: linear-gradient(90deg, #096DD9 0%, #096DD9 100%);
            box-shadow: 0 0 10px 1px #096DD9;
            border-radius: 0.1vw;
            color: #ffffff;
            text-align: center;
            cursor: pointer;
            user-select: none;
          }
        }
        p.recommend {
          font-size: 0.75vw;
          color: #999999;
          position: fixed;
          bottom: 5vh;
          right: 11.5vw;
        }
        p.Copyright {
          font-size: 0.75vw;
          position: fixed;
          bottom: 2vh;
          right: 14vw;
          color: #fff;
        }
      }
    }
  }
}
</style>
